<template>
	<view class="content">
		<block v-for="(item, index) in evaluateList" :key="index">
			<view class="evaluation-item">
				<!-- 头像和昵称单独一行 -->
				<view class="header-row">
					<view class="avatar-container">
						<image :src="item.user.headPortrait" class="avatar"></image>
					</view>
					<view class="nickname">{{ item.user.nickName }}</view>
				</view>
				<!-- 评价内容，限制为两行 -->
				{{ item.evaluationContent !== undefined && item.evaluationContent !== null ? item.evaluationContent : '此用户觉得商品很好，给出评论'}}
				<!-- 图片展示，最多显示三张 -->
				<view class="images-container">
					<image v-for="(pic, picIndex) in item.pictureIntegrations.slice(0, 3)" :key="picIndex"
						:src="pic.pictureUrl" class="evaluation-image" mode="aspectFill"></image>
				</view>
			</view>
		</block>
		<!-- 分页加载更多提示 -->
		<view v-if="loadingMore" class="loading-more">加载中...</view>
		<view v-if="noMoreData" class="no-more-data">没有更多数据了</view>
	</view>
</template>
<script>
	import {
		getEvaluate
	} from '@/api/goods.js';

	export default {
		data() {
			return {
				evaluateList: [],
				loadingMore: false,
				noMoreData: false,
				pageNumber: 1,
				pageSize: 10,
				hasMore: true,
			}
		},
		onLoad(options) {
			this.getEvaluateList(options.id);
		},
		methods: {
			getEvaluateList(id) {
				if (!this.hasMore) return;

				this.loadingMore = true;
				const data = {
					pageNumber: this.pageNumber,
					pageSize: this.pageSize,
					commodityId: id,
				};
				getEvaluate(data).then(res => {
					const newRecords = res.data.records || [];
					this.evaluateList = [...this.evaluateList, ...newRecords];
					this.loadingMore = false;
					this.hasMore = newRecords.length === this.pageSize;
					this.pageNumber += 1;
				}).catch(err => {
					console.error('Error fetching evaluations:', err);
					this.loadingMore = false;
				});
			},
			onReachBottom() {
				if (this.hasMore && !this.loadingMore) {
					this.getEvaluateList(this.$route.query.id);
				} else {
					this.noMoreData = true;
				}
			}
		}
	}
</script>
<style lang="scss">
	@import '@/uni.scss'; // 导入全局 SCSS 变量文件

	.content {
		background-color: $uni-bg-color-grey;
		height: 100vh;
	}

	.evaluation-item {
		margin: 10px;
		padding: 20rpx;
		background-color: #fff;
		/* 根据需要调整 */
		border-radius: 8rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, .1);
		/* 添加阴影效果 */
	}

	.header-row {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.avatar-container {
		flex: 0 0 auto;
		margin-right: 20rpx;
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.nickname {
		font-weight: bold;
		flex: 1 1 auto;
	}

	.evaluation-content {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 10rpx;
	}

	.images-container {
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
	}

	.evaluation-image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 10rpx;
		flex-shrink: 0;
	}

	.loading-more,
	.no-more-data {
		text-align: center;
		padding: 20rpx;
	}
</style>